<script setup>
const onClick = (e) => {
  const li = document.querySelector('.left ul li.active')
  if (li) {
    li.classList.remove('active')
  }
  e.target.classList.add('active')
}
</script>
<template>
  <div class="user-container">
    <el-row :gutter="20">
      <el-col :span="5" :offset="1">
        <div class="left">
          <ul>
            <router-link to="/user/info"
              ><li @click="onClick" class="active">个人信息</li></router-link
            >
            <router-link to="/user/image"><li @click="onClick">更换头像</li></router-link>
            <router-link to="/user/password"><li @click="onClick">修改密码</li></router-link>
            <router-link to="/user/recharge"><li @click="onClick">充值</li></router-link>
          </ul>
        </div></el-col
      >
      <el-col :span="17">
        <div class="right">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.user-container {
  height: 100vh;

  border-radius: 10px;
  margin: 0 auto;
  width: 1200px;
  padding-top: 20px;

  .left {
    margin-top: 25px;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);

    ul {
      list-style: none;
      padding: 10px;
      margin: 10px 40px;

      li {
        margin-top: 15px;
        font-size: 18px;
        color: #fff;
        cursor: pointer;
      }

      li:hover {
        color: #536976;
      }

      //点击之后的样式
      li.active {
        color: rgb(64, 158, 255);
      }
    }
  }

  .right {
    margin-top: 15px;
    height: 90vh;
    background-color: #fff;

    border-radius: 10px;
  }
}
</style>
